Tiny File Manager | issue-63.html

Back Back Up Advanced Editor

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Gauge Test</title>
    <script src="../gauge.min.js"></script>
    <style>body {
        padding: 20px;
        margin: 0;
        background: #fff
    }</style>
</head>
<body>

<a href="#" onclick="gaugePS.value=57">57</a>
<a href="#" onclick="gaugePS.value=83">83</a>
<a href="#" onclick="gaugePS.value=30">30</a>

<hr>

<canvas id="gauge-ps"></canvas>

<script>
var gaugePS = new RadialGauge({
    renderTo: 'gauge-ps',
    width: 400,
    height: 400,
    units: 'PS',
    minValue: 0,
    maxValue: 120,
    majorTicks: [
        '0',
        '10',
        '20',
        '30',
        '40',
        '50',
        '60',
        '70',
        '80',
        '90',
        '100',
        '110',
        '120'
    ],
    minorTicks: 20,
    ticksAngle: 270,
    startAngle: 45,
    strokeTicks: true,
    highlights  : [
        { from : 0,  to : 20, color : '#ffff80' },
        { from : 20,  to : 40, color : 'yellow' },
		{ from : 40,  to : 60, color : 'lightgreen' },
		{ from : 60,  to : 80, color : 'lime' },
        { from : 80, to : 100, color : 'tomato' },
        { from : 100, to : 120, color : 'red' }
    ],
    valueInt: 1,
    valueDec: 0,
    colorPlate: "#fff",
    colorMajorTicks: "#686868",
    colorMinorTicks: "#686868",
    colorTitle: "#000",
    colorUnits: "#000",
    colorNumbers: "#686868",
    valueBox: true,
    colorValueText: "#000",
    colorValueBoxRect: "#fff",
    colorValueBoxRectEnd: "#fff",
    colorValueBoxBackground: "#fff",
    colorValueBoxShadow: false,
    colorValueTextShadow: false,
    colorNeedleShadowUp: true,
    colorNeedleShadowDown: false,
    colorNeedle: "rgba(200, 50, 50, .75)",
    colorNeedleEnd: "rgba(200, 50, 50, .75)",
    colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
    colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
    borderShadowWidth: 0,
    borders: true,
    borderInnerWidth: 0,
    borderMiddleWidth: 0,
    borderOuterWidth: 5,
    colorBorderOuter: "#fafafa",
    colorBorderOuterEnd: "#cdcdcd",
    needleType: "arrow",
    needleWidth: 2,
    needleCircleSize: 7,
    needleCircleOuter: true,
    needleCircleInner: false,
    animationDuration: 4000,
    animationRule: "dequint",
    fontNumbers: "Verdana",
    fontTitle: "Verdana",
    fontUnits: "Verdana",
    fontValue: "Led",
    fontValueStyle: 'italic',
    fontNumbersSize: 20,
    fontNumbersWeight: 'bold',
    fontTitleSize: 24,
    fontUnitsSize: 22,
    fontValueSize: 50,
    animatedValue: true
});
gaugePS.draw();
gaugePS.value = "80";
</script>

</body>
</html>